Web accessibility and the end-user experience
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
Web accessibility
and the end-user
Pre sented by
experience
Ma ura Horan, Anna Sweeney - Digital & Web, IT Services
A ndrew Costello, David Ryan – Trinity Disability Service & Trinity Student
Pre sented on
04 May 2022, 11am – 12pm
1
Agenda
Intro to web EU accessibility Accessibility User’s
accessibility legislation statement Perspective
Success criteria Important
Screen Readers for accessibility elements for Q&A
guidelines web accessibility
Agenda
2
Public bodies in Ireland must ensure their
websites and mobile apps are accessible to
ALL people, including persons with disabilities
Legislation
This is enforceable by law in Ireland
through EU 2020 regulations
European Union (Accessibility of Websites and Mobile Applications of Public Sector
Bodies Regulations 2020). The 2020 regulations give effect to the 2016 EU Web
Accessibility Directive .
The 2020 Regulations require public sector bodies in Ireland to make their websites
and mobile applications (apps) accessible by meeting the 4 principles of accessibility;
Perceivable, Operable, Understandable and Robust (POUR principles). The POUR
accessibility principles are taken from the Web Accessibility Guidelines 2.1 from the
World Wide Web Consortium (W3C).
No matter how complex the national legislation can get, in the end the WCAG2.1
standards are a reliable guide to achieve the minimum accessibility standards as
required by the EU directive.
3
What does digitally accessible
mean?
Digital accessibility is the ability of a website, mobile application or any other electronic
document to be perceived, operated and understood by all users, including users who have
visual, auditory, motor or cognitive disabilities.
POUR
Perceivable, Operable, Understandable and Robust
The directive is legally binding for all public sector bodies and bodies governed by
public law among which are public universities, local governments and other public
institutions.
Although accessibility is worth achieving also for private organizations, the private
sector is not (yet) bound by any European legislation on digital accessibility. Due to
recent legislation, it can be expected that the European Accessibility Act will change
this latest by 2023.
4
Percei vable
POUR Opera ble
• Text alternatives for non-text content • Al l functionality a vailable from a keyboard
• Captions for mul timedia • Gi ve users enough time to rea d a nd use
• Content presented in different ways, content
wi thout l osing meaning • Do not us e content that ca uses seizures or
• Ma ke i t easier for users to see and phys ical reactions
hear content. • Hel p users navigate and find content
• Ma ke i t easier to use inputs other than
keyboard
Understandable Robust
• Ma ke text readable and • Ma xi mize compatibility wi th current
understandable a nd future user tools
• Ma ke content a ppear a nd operate
i n predictable wa ys
• Hel p users avoid and correct mistakes
https://www.w3.org/WAI/standards-guidelines/wcag/glance/
5
When was the directive put
into force?
• 23.09.2019: New websites, created after 23.09.2018, have to be accessible
• 23.09.2020: All other websites (intranets, extranets), and media
such as video and audio have to be accessible.
• 23.09.2021: All mobile applications have to be accessible
6
Who is the subject of the EU
directive on digital accessibility?
• Public universities
• Public sector bodies
• Bodies governed by public law
• Local governments
• Other public institutions
The directive is legally binding for all public sector bodies and bodies governed by
public law among which are public universities, local governments and other public
institutions.
Although accessibility is worth achieving also for private organizations, the private
sector is not (yet) bound by any European legislation on digital accessibility. Due to
recent legislation, it can be expected that the European Accessibility Act will change
this latest by 2023.
7
Monitoring and Reporting
“Directive (EU) 2016/2102 of the European Parliament and of the Council of 26 October
2016 on the accessibility of the websites and mobile applications of public sector bodies”
(the Directive) requires Member States to ensure that websites and mobile applications
(apps) of public sector bodies are fully accessible to persons with disabilities.
NDA released 1st Web Accessibility Monitoring report
The HE institutions got scores of between 22%>36% with average of between 7 & 22
accessibility issues per page
8
Cl ea r channel for someone to provide
feedback, s eek assistance or make a
compl aint in relation to the accessibility
of the website or mobile a pp
Accessibility Sta tements of compliance are based on
a n i nternal or external review of the
statement s i tes’ or a pp’s compliance with WCAG 2.1
https ://www.tcd.ie/accessibility/
Compl aints received in relation to
compl iance with the Directive s hould be
a ddressed and recorded
The 2020 Regulations require that public bodies prepare and regularly update a
detailed, comprehensive and clear accessibility statement on the compliance of their
websites and mobile applications with the Regulations.
The Accessibility statement must be available in an accessible format and be based
on the model accessibility statement contained in Commission Implementing
Decision (EU) 2018/1523.
The Accessibility Statement must include:
A Statement of Commitment of the public body to making its websites and mobile
apps accessible
The Compliance Status of the public sector bodies website and mobile apps with the
standards described above
A description of any content of the website or mobile application that is not
accessible, the reasons for that inaccessibility and, where appropriate, any accessible
alternatives provided,
a feedback mechanism to enable any person to:
notify the public sector body concerned of any failure of any of its websites or mobile
applications to comply with the accessibility requirements
request information in relation to those parts of the content that is inaccessible
a link to the redress or complaint provisions, or both, as the case may be, of the Equal
Status Act 2000 (No. 8 of 2000) and the Disability Act 2005 (No. 14 of 2005).
9
David shares
…his accessibility story
10Screen reader
demo
By Andrew
11Success criteria
of guidelines
For the different types of media, the Web Content Accessibility Guidelines define
success criteria (SCs) that need to be fulfilled to make the medium accessible.
In general, digital text in the right format is the most accessible form of information
as text can be increased in size, it can be read by a screen-reader or it can even be
transformed into braille. Video, audio and even images can be made accessible by
providing a text alternative, descriptive texts or captions.
12Headings
Use headings as sign-posts to specific content – making it easier to navigate the page.
Sign-posts benefit all users.
Page headings should not skip levels. Don’t skip from a H1 to a H3 without creating a
H2 first.
A tiered heading structure is important:
- for good search engine optimisation
- to uphold the website’s accessibility standards
Subheadings (H2, H3) help to split up large pages of text into scannable sections.
With the help of headings, users can skip to the information they are looking for,
without having to search through a whole page of text.
Screen readers use a shortcut allowing users to view a list of all headings found on
the page. Heading codes used in the proper order give an accurate picture of what is
on the web page. Some users also tab through the headings of a page.
13The above screenshot shows a page on the Digital website in Dreamweaver (the tool
we use to edit the website) in the code/design split view.
A H1 appears once at the top of the page "Latest Projects". The main topic of this
page is our recently completed projects in the Digital office. This H1 should only
appear once on this page and should be unique. This means you have no other pages
on your website with a page title at the top of the page named "Recent Projects".
The second heading on the page is a H2 – a subheading labelled with the first
project's title "Provost Review Website". A paragraph of text follows the H2
summarising the project.
The third heading is a H3 – a subheading labelled "Project Description". A paragraph
of text follows describing Project One in more detail.
Once you have ordered your headings without skipping a level – it's ok to use your H2
again.
The second project title uses a H2 subheading, the second project description uses a
H3 and so on.
This hierarchical heading structure displays text in the optimal layout for screen
readers. A consistent layout with tiered headings makes it easier to scan large
paragraphs of text. When you use headings in the right order to sign-post your
content it benefits all users.
14To insert a heading size into your text in Dreamweaver – on your top menu – go to
insert, heading and choose the heading size you'd like to use. Make sure that you are
using them in the correct order and have not skipped a level. Edit the heading text
that is inserted with the text you would like to display. Make sure your headings are
brief, contain key, descriptive words and that they clearly describe the content in the
paragraph below.
15Pictures, graphs and infographics
Pictures can be easily made accessible by adding descriptive text alternatives.
Images such as graphs and diagrams contain detailed information.
Provide a full-text equivalent of the data displayed in the image to explain what is
being shown to users.
A person who cannot see a picture can have the text alternative read aloud using
synthesized speech.
A person who cannot hear an audio file can have the text alternative displayed so
that he or she can read it.
In the future, text alternatives will also allow information to be more easily translated
into sign language or into a simpler form of the same language.
16The following image is a detailed infographic from a page on the TCD website. A
person without full vision may not be able to read this text. A screen reader is
not able to decipher text on an image either. To make this infographic accessible
one solution is to provide a paragraph of text to accompany this image.
If there is no room on the page, it interferes with the way you want the image to
display or the infographic is only available as a download, another option is to provide
a link to a text document which clearly describes the message a picture, graph,
infographic, poster or map is communicating.
17Missing or
poor alt text
In their first monitoring report of websites, the National Disability Authority found
that ALT text occurs sporadically in the body of pages, indicating that new content
published to some websites may not be subject to an accessibility review prior to
publication. Alt text should describe the image that you see on the page. Be specific,
and keep it short. The maximum no of characters for alt text is 125.
18The above image is a screenshot from Dreamweaver showing the split code/design
view of a webpage on the TCD website. The alt tag for the image
you can see to the right is "students". However, there are no students in this picture.
19This is a closer view of the image. The alt tag should describe exactly what a sighted
person can see on the page but I can't see any students in this picture?
20Alt=“collection of sign language
book covers and apps”
The alt tag should describe exactly what a sighted person can see on that page. Keep
it brief, yet descriptive. Use a coherent sentence structure and
don't choose random words. Close your eyes and imagine what you can see if you
read this sentence aloud.
21Tables
• When using screen readers (e.g. JAWS), table data is read
out linearly from left to right across the entire page.
• To make your table accessible you will need to add row and
column headers, titles and a table summary giving a concise
description of the content in the table
Tables should be used to display data and not to format text. When using screen
readers (e.g. JAWS), table data is read out linearly from left to right across the entire
page.
To make your table accessible you will need to add row and column headers, titles
and a table summary giving a concise description of the content in the table. The
title and summary will not be visible on the page but will be picked up by the screen
reader.
22Basic Table
This is an example of a basic table on the TCD website. It's displaying staff contact
details and has a clear title and headings on each row. For more complex
data tables it's a good idea to have headings along each column as well (down the left
hand side). This looks perfectly fine on the page but if you take a look at the code
view of the table in Dreamweaver – can you see whether something is missing?
23This is a screenshot of the basic table in the code view of Dreamweaver, the tool we
currently use to edit the TCD website. Is there anything that can be added to make
this table more accessible?
24summary=“contact details
What's missing? for administrative staff in
school of English”
The table is missing a summary. Here's an example of an appropriate summary to
describe the data in this table.
This is a bit of hidden code for screen readers. You will never see the summary
displayed on the page itself.
You also have an option to add a caption which you WILL be able to see on the page.
In this case the title on the page is referring to the table so a caption is not needed.
The table is the only piece of content on this page. If your table is nestled amongst
many paragraphs of texts and images – make sure to add a title and/or a caption to
the table as well so that it is clearly labelled for screen readers.
25To insert a summary or caption into your table in Dreamweaver, when you are
creating it – go to insert – table – select either a left, top or both headers, add a
caption if you like and definitely fill in the summary. Click OK.
26Here you can see your summary and caption in the code view.
Your caption will be visible on the page – as you can see in the white screenshot from
design view - it's appearing at the top of the table. You can move it to the bottom if
you like by copying everything from and pasting it beneath
The summary is hidden – only a person with a screen reader will hear this, so it’s very
useful if someone can’t read that caption.
27Forms and
interactions
The National Disability Authority recommends that all forms, including all stages in a
process or service online are designed and implemented to be accessible. Specialised
supports from accessibility experts may be required to ensure forms and online
services are accessible from start to finish.
A key aspect of accessible form design is that all form elements (for example buttons,
text boxes, dropdown menus) have clearly coded names and roles.
According to the WCAG, the following success criteria (SC) apply:
Labels or instructions are provided when content requires user input.
Examples: A field for entering a date contains initial text which indicates the correct
format for the date.
A field for entering a given name is clearly labelled with "Given Name" and the field
for family name is labelled "Family Name" to avoid confusion over which name is
requested.
28Pre-recorded
video and
audio
For pre-recorded audio and video, text in the form of transcriptions and captions and
in some cases audio descriptions are crucial to meet the accessibility requirements.
In practice, this means that lecture capture, learning videos and other video-based
media can be made digitally accessible by adding alt-texts and captions. Technology
such as automatic speech recognition can be used to automate big parts of the
captioning process.
29Live-streamed
video and audio
Live video and audio can be made accessible by the same measures as pre-recorded
video and audio (captions, audio descriptions etc…). However, live time-based media
is specifically excluded from the scope of the EU directive.
30Resources
• The World Wide Web Consortium (w3.org)
- simple checks https://www.w3.org/WAI/test-evaluate/preliminary/#video
• Web Content Accessibility - https://www.w3.org/TR/WCAG21/
• WAVE - Web Accessibility Evaluation Tool - https://wave.webaim.org/
• National Disability Authority – learn more about the EU Directive -
https://nda.ie/publications/communications/eu-web-accessibility-directive/
• NDA Monitoring Report - https://www.nda.ie/publications/communications/eu-
web-accessibility-directive/monitoring%20reports/
• POUR principles - http://nda.ie/publications/communications/eu-web-
accessibility-directive/#POUR
• World Wide Web Consortium (W3C) - https://www.w3.org/Consortium/
Here are links to key resources used in the research for this presentation.
31EU Legislation
• European Accessibility Act - https://ec.europa.eu/social/main.jsp?catId=1202
• https://www.consilium.europa.eu/en/press/press-
releases/2019/04/09/improving-accessibility-to-products-and-services-for-
disabled-and-elderly-people-council-adopts-the-accessibility-act/
• European Union (Accessibility of Websites and Mobile Applications of Public
Sector Bodies Regulations 2020) -
https://www.irishstatutebook.ie/eli/2020/si/358/made/en
• 2016 EU Web Accessibility Directive - https://eur-lex.europa.eu/legal-
content/en/TXT/?uri=CELEX%3A32016L2102
• Commission Implementing Decision (EU) 2018/1523 - https://eur-
lex.europa.eu/eli/dec_impl/2018/1523/oj
Current EU Legislation around Accessibility
32Thank You
Thank you for being here today and we hope you enjoyed this presentation - from the
Digital & Web Team, Disability Services and our Guest Speaker David Ryan, who is
currently studying at Trinity.
If there are any topics we covered today which you would like to hear more about, or
indeed anything which was not mentioned, please contact the Digital office –
digital@tcd.ie. If we receive multiple requests for a topic or theme, we are happy to
organise further accessibility webinars in the future.
33You can also read
