Posts

Screen readers and languages test page

by

The following paragraphs are marked up with different languages in the lang attribute. These can be used for testing the accent of a screen reader. The two letter language code in the lang attribute should match the language the text was written in.

If a language isn’t specified, the screen reader will read the page in the user’s default language. That may result in a bad accent that’s difficult to understand. To specify a language for the page, add the ‘lang’ attribute to the HTML tag. For example: html lang=en.

Si aucune langue n’est spécifiée, le lecteur d’écran lira la page dans la langue par défaut de l’utilisateur. Cela peut entraîner un mauvais accent difficile à comprendre. Pour spécifier une langue pour la page, ajoutez l’attribut ‘lang’ à la balise HTML. Par exemple : html lang=fr.

Marked up as French lang=”fr” a language isn’t specified, the screen reader will read the page in the user’s default language. That may result in a bad accent that’s difficult to understand. To specify a language for the page, add the ‘lang’ attribute to the HTML tag. For example: html lang=fr.

Wenn keine Sprache angegeben ist, liest der Bildschirmleser die Seite in der Standardsprache des Benutzers vor. Das kann zu einem schlechten Akzent führen, der schwer zu verstehen ist. Um eine Sprache für die Seite anzugeben, fügen Sie dem HTML-Tag das Attribut „lang“ hinzu. Beispiel: html lang=de.

Marked up as German lang=”de”: If a language isn’t specified, the screen reader will read the page in the user’s default language. That may result in a bad accent that’s difficult to understand. To specify a language for the page, add the ‘lang’ attribute to the HTML tag. For example: html lang=de.

>यदि कोई भाषा निर्दिष्ट नहीं है, तो स्क्रीन रीडर पृष्ठ को उपयोगकर्ता की डिफ़ॉल्ट भाषा में पढ़ेगा। इसका परिणाम खराब लहजे में हो सकता है जिसे समझना मुश्किल है। पृष्ठ के लिए एक भाषा निर्दिष्ट करने के लिए, HTML टैग में ‘लैंग’ विशेषता जोड़ें। उदाहरण के लिए: html lang=hi.

Resources

ISO 2 Letter Language Codes reference

Google Translate

ISO 639.2 Codes for the Representation of Names of Languages

Complex images and alt text descriptions

by

Complex images like charts & graphs must be briefly described using basic alt text and must have a more complete long description elsewhere in the page. The long description should be available to both sighted and screen-reader users and be programmatically associated with the image.

The figure / figcaption method:

One of the limitations of basic alt text is that it’s meant to be brief, no more than around 150 characters. So you shouldn’t try to use an alt attribute in an image for the long description. Instead, a good way to add a programmatically associated long description is the use the figure / figcaption method. In this method the figure tag wraps the whole image and long description code. Then the figcaption tag is used to wrap the long description text. This can be normal HTML text that’s available to both sighted and screen reader users. Inspect the code of this preformatted example to see how the figcaption tag is used house a long description.


    Pie chart showing factors affecting credit scores. See table next to this image for the data.
    

    
Factors in Your Credit Score

    

    
    

     Payment History (35%)
    35%
    

    

    Outstanding Debt (30%)
    30%
    

    

    Credit History (15%)
    15%
    

    

    Pursuit of New Credit (10%)
    10%
    

    

    Types of Credit in Use (10%)
    10%

The aria-describedby method:

You can also use the aria-describedby attribute added to an image to point to the id of a long description. For example, you could point to the id of a div wrapping a long description like:

    Pie chart showing factors affecting credit scores. See table next to this image for the data.

    

    
Factors in Your Credit Score

    

    
    

     Payment History (35%)
    35%
    

    

    Outstanding Debt (30%)
    30%
    

    

    Credit History (15%)
    15%
    

    

    Pursuit of New Credit (10%)
    10%
    

    

    Types of Credit in Use (10%)
    10%

Inspect the code of this preformatted example to see how aria-describedby works. In this example, the table within the wrapper div describes the segments of the pie chart. It wouldn’t be possible to descibe all those segments in basic alt text.

The web accessibility guideline SC related complex images is 1.1.1 Non-text Content (Level A). The W3C WAI has a tutorial with more information about handling complex images. Most universities are striving to meet WCAG level AA conformance. Of the three levels of WCAG conformance, level A is the most important to achieve and level AAA is nice to have but not mandatory. So level AA is a middle ground that most universities and government agencies strive to achieve. Ohio State’s information about minimum web accessibility standards can be found in the Digital Accessibility Center’s website.

Comparing screen readers: VoiceOver and NVDA

by

VoiceOver for Mac and NVDA for Windows are two popular screen readers helping users with visual disabliites navigate websites. They share some similarities and have some differences. VoiceOver’s rotor and NVDA’s Insert+F7 function fullfill a similar purpose.

The basics:

To launch VoiceOver, click Command+F7. To a launch NVDA, click Control+Alt+N.

In VoiceOver you use VO + Right Arrow to read the next item while in NVDA you use the Down Arrow.
In VoiceOver you use VO + Left Arrow to read the previous item but not in NVDA.

The rotor:

The rotor in MacOS VoiceOver is similar to NVDA’s Insert+F7 function in that it allows the user view and to jump to headings, landmarks, or other HTML elements. To popup the rotor in MacOS VoiceOver presss VO + U. ‘VO’ is the VoiceOver keys (Control & Option) that are pressed in conjunction with a VoiceOver command (like U which launches the rotor). Use the Left and Right arrows to select page elements like: Links, Headings, Tables, Frames, Images, Form Controls, Landmarks, Visited Links, and Non-Visited Links. Once a page element type is selected, the Up and Down arrows can be used to select a particular element from the list and Enter can be used to activate it. The Escape key exits the rotor.

An example of the rotor in MacOS Voiceover poping up a list of headings.

An example of the rotor in MacOS Voiceover poping up a list of headings.

 

Configuring the rotor

You can choose which element types are viewable in the rotor by opening the VoiceOver Utility with VO + F8, then going to ‘Web’ > ‘Web Rotor’. VoiceOver for iOS devices also has a similar rotor that can be configured.

 

 

Features similar to the rotor in other screen readers:

Popping up a list of all links in other screen readers is similar to what the rotor does in MacOS VoiceOver. Insert+F7 in NVDA can pop up a list of all links.

To list all links in MS Narrator, hit Caps Lock + F7 or Insert + F7. See Deque System’s information about MS Narrator for info about keyboard shortcuts.

To list all links in JAWS for Windows, hit Insert + F7. See Deque System’s information about JAWS for info about keyboard shortcuts.

ARIA Menu or Menu bar interaction pattern recomendations

by

Many websites use Menu or Menu bars for their global navigation to pages in the site. For maximium accessbility it’s best for these menu bars to follow ARIA APG guidelines. In ARIA APG’s recommended menu interaction pattern, because menubar and menu elements are composite widgets as described in Keyboard Navigation Inside Components, Tab and Shift + Tab don’t move focus among the items in the menu. Instead arrow keys are used to move through the menu items and the Enter key is used to follow a link. The right arrow goes to the next item and the left arrow moves focus to previous item. See ARIA APG’s recommended menu interaction pattern for more details about how the arrow keys should behave. Using ARIA APG guidelines as a standard way of building menus will help establish a web convenion that users can learn and apply to a lot of website. Using a standard interaction pattern convension for menus will save users time in not having to learn a different interaction pattern.

ARIA menu and interation pattern resources

What’s new in WCAG 2.1?

by

The Web Content Accessibility Guidelines (WCAG) are a set of globally adopted technical standards on web accessibility developed by the World Wide Web Consortium (W3C). The guidelines represent a shared, international standard developed by many different stakeholders including: education, industry, disability organizations, government, and accessibility research organizations. The guidelines strive to make websites, apps, electronic documents, and other digital assets accessible to people with a broad range of disabilities, including sensory, intellectual, learning, and physical disabilities.

WCAG covers a breath of success criteria that, when followed by website designers, developers, and content authors, can remove many of the barriers that people with disabilities face when navigating a website or other digital applications. Find out more about WCAG in this article – WCAG 101: Understanding the Web Content Accessibility Guidelines.

What are the new accessibility guidelines in WCAG 2.1?

WCAG 2.1 became a W3C Recommendation in June 2018. There are 17 new SC (success criteria) guidelines in WCAG 2.1:

  1. 1.4 Reflow (AA) – responsive design principals are important to accessibility.
  2. 1.4.11 Non-text Contrast (AA) – requires the icons, UI, and graphics should have good color contrast.
  3. 1.4.12 Text Spacing (AA) – the Text Spacing bookmarklet can help test.
  4. 1.4.13 Content on Hover or Focus (AA) – don’t show unexpected content on hover.
  5. 2.1.4 Character Key Shortcuts (A) – don’t interfere with screen reader shortcuts.
  6. 2.5.1 Pointer Gestures (A) – complex gestures also need a single pointer equivalent.
  7. 2.5.2 Pointer Cancellation (A) – down events must not be used to complete a function.
  8. 2.5.3 Label in Name (A) – visible labels should match the accessible name.
  9. 2.5.4 Motion Actuation (A) – don’t make shaking the phone the only way to complete an action.
  10. 4.1.3 Status Message (AA) – alert the user, but don’t interrupt them.
  11. 1.3.6 Identify Purpose (AAA) – HTML content should provide context, purpose and meaning.
  12. 2.2.6 Timeouts (AAA) – you must store the user’s data for 20 hours.
  13. 2.3.3 Animation from interactions – motion animation trigged by interaction can be disabled. Use media query: prefers reduced motion.
  14. 2.5.5 Target Size (AAA) – touch target size must be 44 x 44px.
  15. 2.5.6 Concurrent Input Mechanisms (AAA) – websites should allow users to switch between input modalities.

Here’s a Good video covering all things new in WCAG 2.1 (53:58).

What are the main WCAG principals of accessibility?

The top four principals of WCAG are: perceivable, operable, understandable, and robust. All new guidelines introduced fall under one of these broad categories. WCAG 2.2 is scheduled to be completed in early 2023 and will include 12+ new guidelines.

  1. Perceivable – people must be able to find your content.
  2. Operable – people must be able to use your website.
  3. Understandable – people must be able to understand your website.
  4. Robust – your website must work with different assistive technology.

See Understanding the Four Principles of Accessibility for more info.

Setting up a heading structure in InDesign for accessibility

by

TOC

Something that’s different in InDesign from Word is that in MS Word you already have predefined Heading level styles in the Home ribbon whereas in InDesign you have to set up your own ‘Paragraph Styles’ and map them to a Heading structure. You can follow the directions found in this workflow for creating accessible PDFs from InDesign article to setup a template InDesign document with a structure. Here’s an example template exported to PDF. For an InDesign template for graphic designers, it might be good to have Paragraph Styles predefined and maybe have an XML document structure predefined based on text frames they most commonly use. Penn State also has some good information about accessibility and InDesign in this article: Accessibility at Penn State | InDesign Accessibility (psu.edu).

What you setup in the InDesign Structure panel becomes what you see in the Tags panel in Acrobat. The tags in PDF are very similar to HTML with a few odd differences. For example there’s a general <L> tag for all lists instead of <ul> and <ol> (unordered lists and ordered lists) tags. InDesign can also export to ePub format which is more like regular HTML.

Set the tab order in InDesign:

The structure created in the InDesign Articles panel is exported to the PDF file, but it is not automatically set as the order followed when tabbing through interactive elements like hyperlinks and form fields.

  • If the tab order fails in Acrobat, you can right-click on the issue and choose ‘Fix’. This sets the tab order to match the document structure that you set up in InDesign.
  • You can view and adjust the reading order in the Order panel (looks like a Z icon in the left panels).
  • If the panels aren’t there you can open them by going to: View > Show/Hide > Navigation Panes > Page Thumbnails
view and adjust the tab order in the tab order panel

To get to the Tab Order Panel in Acrobat, click the Z icon in the left panels.

 

How to Export to PDF:

In InDesign, when you are ready to export to an accessible PDF, go to: File > Export > PDF

  • Choose Adobe PDF (Interactive) if your document contains forms, buttons, audio, or video or Adobe PDF (Print) format if it doesn’t.
  • Check the Tagged PDF box to ensure you document structure and tags are exported.
  • Then save the document and open it in Acrobat Pro to check for any accessibility issues.
Export to PDF settings - create tagged PDF

In the export PDF settings in InDesign, check the Tagged PDF box to ensure you document structure and tags are exported in the PDF output.

 

Three things to do in Acrobat after you export your InDesign document to PDF:

  • Assign a document language
  • Set PDF tab order to ‘use document structure’
  • Run the accessibility checker
  • View and adjust the order in the Tab Order Panel
view and adjust the tab order in the tab order panel

Screen of the Tab Order Panel in Acrobat where you can adjust the PDF document tab order.

 

Find out more in the workflow for creating accessible PDFs from InDesign article.

 

Resources about InDesign and accessibility

HTML 5 Landmarks and equivalent ARIA Landmark Roles

by

WAI-ARIA roles provide more semantic meaning to content making webpages more accessbile. ARIA landmark roles provide a way to turn bare <divs> into HTML 5 landmarks. This can be useful in systems where the <divs> can’t be turned into real HTML 5 landmarks for whatever reason.

Comparison of HTML 5 Landmarks and equivalent ARIA Landmark Roles
HTML 5 Landmark Equivalent ARIA Landmark Roles more information
<main> <div role="main"> info about the ARIA main role
<nav> <div role="navigation"> info about the ARIA navigation role
<header> <div role="banner"> info about the ARIA banner role
<footer> <div role="contentinfo"> info about the ARIA content info role
<section> <div role="region" aria-label="Example"> info about the ARIA region role
<aside> <div role="complementary"> info about the ARIA complementary role
<form> <div role="form" aria-label="Contact information"> info about the ARIA form role

Find about more about ARIA (Accessible Rich Internet Applications markup) in the Custom JavaScript/ARIA Widgets Buckeye Learn course.

Fixing a broken skip nav accessibility error

by

The Ohio State navbar contains a hidden skip nav link that jumps to an anchor called “page-content”.  This skip link is hidden visually (through CSS) but available for those using screen readers to use to skip the other Ohio State navbar links and go straight to a page’s content.  A review by the WAVE tool will report if the skip nav anchor is missing from a page. To correct a broken skip nav link, add an anchor near the start of your page’s main content. Here are some examples of possible anchors:

  • <a name=”page-content” id=”page-content”> – The ‘name’ attribute works in HTML 4 and the ‘id’ attribute in HTML 5.
  • <div id=”page-content”>  – In HTML 5 the ‘id’ attribute can be placed in a lot of different elements, such as a <div> or <main>.

Some more information about using anchors in HTML is available from W3 Schools. See the info about the HTML <a> name Attribute.

The WebAIM organization has some more information about “Skip Navigation” Links in their site.

Video tutorials related to managing media with Drupal 8.6+

by

Drupal 8 Media Entity File Browser Widget 9:43 – 3/8/16 – video tutorial showing how to add an Entity Browser to a Gallery Content Type for browsing for gallery images. 

  • The presenter went to: ‘Manage Fields > Manage Form Display’ in the Gallery Content Type.
  • Then changed the Gallery Images field type to ‘File Browser’.
  • Then he chose the ‘Browse for Images’ option. The drag and drop functionally is powered by Dropzone JS.
  • Alternately, choosing ‘Browse for Files (modal)’ will have the File Browser pop up in an overlay.

Adding a node ID as class to the tag in Drupal 8

by

One thing I discovered recently in my college’s Drupal 8 site was that the node number CSS class that used to be applied to the <body> tag was missing. In Drupal 7 there was a unique node ID class and it looked sort of like this:

<body class=”html not-front not-logged-in no-sidebars page-node page-node- page-node-8471 node-type-article news-newsreleases context-news”>

Having this unique node number CSS class was useful for cases when specific pages needed custom styles applied.

By default, Drupal 8 seems to add no such class to pages. To get them back I added a snippet of code I found on a Drupal.org post. I found it was easiest to use:

 /**
* Implements hook_preprocess_html().
*/
function themename_preprocess_html(&$variables) {
if ($node = \Drupal::request()->attributes->get(‘node’)) {
$variables[‘attributes’][‘class’][] = ‘page-node-‘ . $node->id();
}
}

in my theme’s sitetheme.theme file.

This is also a Node Class module that might help accomplish the same objective, adding unique CSS classes to a page. It’s a simple module that allows users to add custom CSS classes to any node through the node/add interface.

After adding the snippet of code above to my sitetheme.theme file I was able to target a faculty profile page that needed custom styling. Previously, without a unique CSS class, there no way to target that specific page.