Accessibility in Web Development: Practical Tips for HTML/CSS Developers

Web accessibility refers to a set of inclusive practices and guidelines to make interaction of people with disabilities and the web apps a) possible and b) more convenient.

Along with content and UI/UX design, website layout is a crucial component that should be made accessible for both people with and without disabilities, and even machines (i.e. assistive technologies and devices used by people with impairments). Here are a few practical tips how HTML/CSS developers could make their web interfaces more accessible and user-friendly.

Keep Your Markup Clean

• Whatever markup you are using, structure it correctly and neatly, avoid skipping levels. Always favor native elements (if there are ones) over faking them. For instance, use the <button> elements instead of <span> or <div> in HTML. Use <nav> for navigation, <button> for page actions.

Distinguish <strong> or <em> elements from <bold> or <i>. The former two are used for semantic emphasis on the content, the latter two - for visual emphasis.

A few obvious things, which already became best practices:

• Make sure company logo in the banner links back to the website Home page.
• Use the <lang> attribute to tell browser which language(s) is used on a website.
• If you want to hide content visually and from screen readers, use the hidden attribute.
• Add anchor links (jump links) for long pages, so users could skip the content they do not need and proceed to the relevant part.

Mind Semantics of the Page

• Both the user and the machine (read: assistive technology) should be able to recognize the page structure. Create semantic layouts by making use of sectioning (<header>, <footer>, <article>, <nav>) and heading elements on a page. This helps to define a clear hierarchic outline of a webpage and distinguish primary (main: <h1>, <h2>, <article>) and secondary (less important: <h3> - <h6>, <footer>) content.

Mind Semantics in Page Layout

As you use headings within a page, do not fake actual markup of header attributes (<h>) with formatting (font style and size) as this does not allow assistive technologies to recognize that these are headers.

• Use ARIA landmarks across the web pages — where this is appropriate.
  ARIA (Accessible Rich Internet Applications) is a comprehensive technical specification for adding accessibility information to elements that are not natively accessible (in particular, the ones developed with JavaScript, AJAX, and DHTML). With ARIA landmarks, a developer can extend HTML capabilities and apply proper semantics, i.e. properties, to UI and content elements for assistive technologies to understand these.

Here is an example of how a HTML semantic elements (<header>, <nav>, <main>, <footer>) are combined with ARIA role attributes (“banner”, “navigation”, “main”, “contentinfo”) to make website navigation using screen reader easier for people with disabilities.

Combine HTML Elements and ARIA Landmarks in Page Layout

Though most ARIA functions were recently implemented in HTML5 (and you should definitely favor these!), not all screen readers and browsers (e.g. IE) are sophisticated enough to depend on HTML semantics only. Some examples of appropriate ARIA use are assigning roles to describe some types of widgets (“menu”, “treeitem”, “slider”), defining properties for drag-and-drop that describe drag sources and drop targets, adding alerts to notify assistive technologies about dynamic page changes.

Support Tab Navigation

• Make Tab order (also called Document Object Model or DOM order) of elements coincide with the visual one. Remove unnecessary elements from the Tab order not to confuse the user who navigates with Tab or assistive device.
• Make the focus of navigation elements visible. You could use a third-party plug-in for this or <outline> attribute that provides visual feedback for page elements and links that have focus while tabbed navigation (or its alternatives).

Use <tabindex> attribute to make such elements as links, buttons, form fields, focusable and selectable with the Enter key and/or spacebar. Even non-focusable elements with <tabindex> attribute and 0 integer value could be made focusable, e.g. <h3 tabindex="0">A focusable heading</h3>

• If there are pop-up windows on a page, navigation priority should allow to close them first. Once this is done, the focus should ideally jump back to the web page element where the user was interrupted by the opened modal window. To achieve this, store the last focused element in a variable.

Add Alternative Text for Images

• Almost all the content on a page can be accessed by screen readers — except for graphical information. So do not forget to add alternative text (<img> alt attribute) for images and other pieces of graphics. This will aid not only people who use assistive technologies to “read” the screen but also users with poor Internet connection. Your website will also become SE-optimized with image alt texts.

Image alt text should be precise, laconic and reflect the primary purpose why the image was added. For instance, instead of simply saying “logo” for the following image, you’d better specify it is Logicify company logo in <img alt=>.

Make Alt Text Meaningful and Contextual

However, depending on the context, the very same image could have different alternative texts. If the logo is placed in header and returns the user to Home page, the accurate alt text for it could be <img alt="Logicify logo - Home page.">

• In alt text, avoid redundant “image of” or “picture of” — the assistive technology either way warns the user there is an image.
• End the alt text with a period. This will make screen readers pause a bit after the last word in the alt text, hence a more pleasant experience for the user.
• The alternative text for an image that has multiple clickable areas (e.g. image map) should provide complete description for these links. Additionally, each clickable area should have corresponding alternative text describing its purpose or destination.
• Avoid images of text; if you can not go without them, the alternative text should contain the very same words as in the image.
• If you have multiple images conveying a single piece of information, the alternative text for the first image in the group should contain the information for the entire group.
• To familiarize yourself with generally accepted standards for alt texts, you could always check this Alt Text Decision Tree.

While this is imperative to add alt text for all images that are important for understanding of the content, there is no need to do so for menu icons or decorative images (like covers), which do not directly relate to the content. For such images, simply use an empty <img alt> attribute.

Finishing Tip

Though these tips would definite add to your website’s inclusion, we encourage you not to think about web accessibility as a formal set of guidelines. It is, in the first line, a comprehensive strategy to care about all users and make your website content available for them — no matter the browser, Internet provider, or assisstive device they are using.

You might be interested in our previous articles about web accessibility:

Accessibility in Web Development: How eCommerce and Business Websites Benefit from It

Accessibility in Web Development: Practical Tips for UI/UX Designers and Content Editors

Accessibility in Web Development: Overview of Assistive Technologies and Practical Tips for QA

Originally published at www.logicify.com/en/blog on February 21, 2019.