Accessible Web Content and Design Example: Annotated

Print Page

There are a few things up in the header that are important to note:

  • There is a Skip to Content link that you hit when you tab through the page. It has some key features:
    • Invisible, until someone reaches it with the tab key. Then it's visible.
    • If someone tabs past it, then it disappears again.
    • If someone tabs past it, they can tab on into the other things in the header like the ABLE Tech home page link, email link and the top navigation elements.
    • When you trigger the link with the Enter key, you skip past the links and navigation in the header and move to the main content of the page, beginning with "Accessible Web Content and Design Example: Annotated". This prevents keyboard users from having to tab into and out of every element in the header that is reachable from the keyboard.
  • Our top navigation elements (Web Accessibility Tips, Resources and Downloads) do not have flyout menus that appear when you run a mouse over the element. If yours do have a flyout, then those need to be easily navigable from the keyboard. With that they need to visible when they have keyboard focus.
  • When you tab across the different links and menu items, note how they visibly change to show that they have keyboard focus.
  • The tab order is logical throughout the entire page, starting with the header content.
  • The Search has a visible label (the magnifying glass icon) that meets color contrast standards and remains visible.
  • The Search field and button are both reachable from the keyboard, and you can start a search with the Enter key when the button has keyboard focus.
  • In the rest of the page content, the text contrasts well against the background color behind it. This is true in the header as well, even when the navigation elements change color on mouse hover or keyboard focus.
  • Keyboard focus is clear, either using an outline, change in background color, or both.

Throughout the rest of the text content on the page, color contrast also meets the ratio in the Web Content Accessibility Guidelines 2.0 AA.

Start: Dogs, Cats and Kids, Oh My! <H1>

When Everyone Works from Home, Does Anyone? <H2>

Unprecedented. It's hard to find another word than that to describe what our work and personal lives have become in the last few weeks. <p>

Even for those that worked from home before, everything is different. <p>

Zoom <H3>

The paragraph below has a link. Note the descriptive link text.

For some, the Zoom meeting and webinar platform was already a familiar tool. ABLE Tech began to use it a couple of years ago as our staff are scattered around Oklahoma. On the accessibility side, we have used it for training and technical assistance for more than 2 years. <p>

The rest of the world didn't seem to know it existed before March. <p>

Now we use Zoom for all kinds of things: <p>

<Unordered List>

  • Work <list item>
  • School <list item>
  • Social life <list item>
  • Sports <list item>
  • And more <list item>

Pets <H3>

Every remote employee at ABLE Tech signs a form that says that they will ensure that communication from the home office is professional. That includes things like not having screaming kids or barking dogs in the background during calls. <p>

This is not possible. And you know what? Meetings and trainings still work! <p>

<Below is an image with alternative text set to "Elliott, a gray striped tabby cat, laying on a gray striped rug.">

Elliott, a gray striped tabby cat, laying on a gray striped rug.
This cat hides in plain sight. Except during meetings.

Kids <H3>

If you have kids, especially younger ones, then your work life and home life are blended like never before. The boundary between work and school and life always moves. And for many the combination of responsibilities starts as soon as they wake up and might end an hour before they fall asleep on sofa. <p>

What to Do? <H2>

A few people have asked, "what tips do you have for working from home?" And even now there are some things that can make it easier. <p>

Dedicate Space, Even if it's Not an Office <H3>

Having a place to call home for work will help to set up something like a routine. It can be part of a sofa or the dining table during work hours. If you have an unused room and can set up an office there, even better. <p>

Give Yourself and Others a Break <H3>

This is what happens when we all run at about 70% capacity, at most. It is a really good time to cut people some slack. And that should include cutting yourself some slack. Things aren't coming as easily as they were in February. It's OK. Manage expectations, even the ones you have for yourself. <p>

Take Screen Breaks <H3>

Especially for those that are on a device during work it is important to remove your face from your screen(s) from time to time. Move some. Go outside. Stare vacantly into the sky or a wall. Admit that it's hard to focus for more than about 30 minutes. Give your brain breaks during the day. <p>

Manage the News <H3>

The news is consistent and everyone has an angle. The sensational stories are the ones that come through loudest right now. Don't fall out of touch with things changing as quickly as they are right now. Don't glue yourself to a news stream all day and all night either. <p>

The chart below shows some lines:

Series 1 drops then rises steadily. Series 2 rises, drops, and rises again slowly. Series 3 stays flat then rises exponentially.

The chart uses color as well as "markers", the different shapes along it, to show which line is which. The alternative text describes the trend in each line as well: "Series 1 drops then rises steadily. Series 2 rises, drops, and rises again slowly. Series 3 stays flat then rises exponentially."

Manage Your Energy <H3>

This sounds metaphysical. Hear me out. We only have so much energy. Right now our batteries are low literally from the time we wake up. Be mindful about what you put energy into and how much it takes to do things. Keep up with responsibilities in work and personal life. Recognize that some things are gonna have to wait. <p>

<Below is an image that is decorative. Alternative text is null. alt="">

Catch up on a Project or 10 <H3>

If you have spare time then use it to do something. Fix something that's been broken for a while. Cut your own hair. Cut your cat's hair. Make your website accessible. At this point anything constructive or at least not harmful will do! <p>

<Below is an image of the World Wide Web Consortium (W3C) logo that links to the W3C website. Being in a link tag <a href...> has meaning that assistive technology will report. alt="World Wide Web Consortium" serves as link text.>

Keep a Schedule Handy <H3>

It's spinning plates while juggling knives and balancing on a balance beam. Keeping a schedule handy where everyone can see it can help everyone stay that much more organized. And that much less stressed. Below is an example of a schedule for the work week. <p>

<Below is a table with Header cells marked up as TH, data as TD. For a simple table like this, that will do.>

MondayTuesdayWednesdayThursdayFriday
M 10 IEPR 11 MtgK1 Friend ZoomM 9 MtgM 11 Mtg
R 10:30 MtgK1 12 SchoolR 2 MtgR 11 MtgR 11 Mtg
K1 11 SoccerK2 3 SoccerM 2 MtgK2 2 Friend ZoomK1 11 School
K2 3 SchoolM 3:30 MtgK1 5 GuitarK1 3 SoccerK2 11 School

Don't Send a Message after About 2 Without Thinking About It <H3>

We're all at or near stress level maximum a lot more than we're used to. If your stress rises during the day and your patience drops during the day then don't hit Send on that email without re-reading. And reconsidering. <p>

Create Connections <H3>

This is a great time to create and recreate connections. Phone calls and letters are things that we have time for. Even if we don't maintaining our connections and forging new ones is important while we stay 6 feet apart from the world. <p>

You can connect with us through the form below (required fields are noted with an asterisk): <p>

<Lots in the form. We'll look at the markup!>

Contact Us with Annotations
The first three fields are text entry fields. Each has a visible text label that tells someone what to enter into the field. Each label shows required fields with an asterisk. This form uses Accessible Rich Internet Application (ARIA) markup to make sure that this information is available to screen readers. Each label is associated with its text entry field.
The next set of form elements is a set of radio buttons. Radio button sets only allow someone to select one item from the set. Each radio button has a label that is associated with ARIA. And the overall set is also associated with the question above it using ARIA. So a screen reader should announce the question for the group as well as each individual label.

Bonus: if you click or tap the text label on an accessible HTML radio button then it's the same as clicking or tapping on the actual radio button. Same with checkboxes!

Do you want to join our mailing list or just say hello?
This group is a set of checkboxes. Someone can select one or more of the options in a set of checkboxes. Like the radio buttons, each checkbox has a visible label that is associated with it using ARIA. And the group is associated with the question above it as well.
What do you like about working from home during the pandemic?
Now we're back to text entry fields with labels as above.
Finally, the Submit button has markup that conveys its function through a screen reader. It is also reachable and usable from the keyboard only. This is because it is tagged as a button with a specific "submit" type. The visible label is available to screen readers as well.

<End>