Good morning <<First Name>>,
I hope you have had a fantastic month. It was great to see such a good turnout for the Perth Web Accessibility Camp in February. There was a great mix of disciplines and professions gathered together to discuss and learn about accessibility.
This months article is written by our in house code guru Stuart Shearing, who will be sharing some of his knowledge on the big topic of ARIA and how to use it correctly. So gather your developer buddies, grab a packet of gingernuts and enjoy.
See you next issue!
Karl Mccabe
|
|
Season Lightly with ARIA
10th of February, by Stuart Shearing (website analyst)
|
|
Speaking as a code-monkey, one thing we love to do when we discover a new method of doing something is to implement it and find as many creative ways to use it as possible. This often ends in overuse.
One thing that’s increasingly being overused is ARIA.
ARIA is an acronym for Accessible Rich Internet Applications, and it is a set of attributes that define ways to make web content more accessible.
ARIA is a double-edged sword because it changes an HTML document’s semantic structure by prioritising ARIA over the content already there. Doing so can have serious implications if it is not done correctly and can worsen a page. For this reason, you should only use ARIA if you cannot do something natively in HTML.
ARIA usage is a massive subject, so I’m not going to go deeply into it. For this article, I would like to give some examples of improving accessibility when using SVG images or font-generated icons (such as the ones created by Font Awesome or Glyphicon).
These methods are often used to create graphical links to social media.
Consider this image example using standard HTML:
<a href="https://www.facebook.com/ADWebKey/"><img src="facebook-graphic.png" width="80" height="80" alt="AD Webkey on Facebook"></a>
The alt attribute is read out in the screen reader and makes sense to people who rely on assistive technology.
Using Font Awesome as an example, it’s possible to replace this graphic image with a font icon that renders quickly; however, simply replacing the image with the icon only works on a visual level and is not accessible. Using ARIA sparingly, the desired results can be achieved.
<a href="https://www.facebook.com/ADWebKey/"><i class="fa fal-facebook"></i></a>
In the example above, we’ve replaced the image with Font Awesome (example for Font Awesome version 5); however, this fails because the link reads the URL through the screen reader, which sounds jarring.
By adding ARIA and a content block that is visually hidden, we can achieve positive results:
<a href="https://www.facebook.com/ADWebKey/"><i class="fa fab-facebook" aria-hidden="true"></i><span class="sr-only">AD Webkey on Facebook</span></a>
We’ve used ‘sr-only’ to hide the text, which has become a de-facto standard for adding visually hidden content for accessibility.
You can apply the same methodology to SVG images that are code embedded as these cannot have an alt attribute applied.
A common mistake is to use an aria-label on these elements. Logically it makes sense that you would do so as you’re replacing the alt attribute; however, you should only use aria-label on interactive elements, such as buttons or links. As is the case with all ARIA, it should be used sparingly.
Going into full code-monkey mode and applying it everywhere is generally a bad idea. Adding too much will have Jeff Goldblum proclaiming, “Your web developers were so preoccupied with whether they could, they didn’t stop to think if they should”, and you never want to upset Jeff!
One final thing to remember is, “No ARIA is better than bad ARIA”.
|
|
Making Transcripts
Tip from Melanie Hawkes
(Usability Analyst)
After creating captions, a transcript of the video can be made. Here is the easiest way I have found:
- In YouTube, download the captions as an SRT file.
- Open the SRT file in Notepad.
- Select all and copy.
- Paste in the input box on the Tool Slick website (opens in new window)
- Click the convert button.
- Click the with output button and choose line merger.
- Click the copy output button
- Paste in a new Word Document.
- Add a heading, eg Video Transcript: name of video
- Take out any square brackets of music or irrelevant content.
- Add lines in to make paragraphs (if needed) and identify who the speakers in the video are in square brackets before they talk.
If the video had text on the screen that you didn’t need to caption, don’t forget to add it in the transcript.
|
|
|
 From the VP
10th of March, by Amanda Mace (Vice President)
|
|
I’d like to start by giving a shout out to my fellow Perth Web Accessibility Camp (PWAC) planning committee members. PWAC, which was held on February 22nd, hosted in the lovely VisAbility premises was a resounding success. The guest speakers were, as always, incredible. Thank you to the sponsors, speakers and attendees for making PWAC yet again a fantastic event.
I was honoured once again to present at PWAC, this year with my colleague, Shane Fynn about how WCAG and PDF/UA are complimentary. We spoke for about 20 minutes about the similarities as well as the differences between the two standards and why it's important to understand what you need to be asking for when you're requesting your content to be accessible.
If you’re wondering what PDF/UA is, to start, the “UA” stands for universal accessibility and it's a normative technical standard. PDF/UA is also an ISO standard, it’s 14289-1.
Asking for something to be accessible in a PDF does not mean that it is not WCAG compliant. But what it does means is that it's compliant for specific format, and that's PDF. This is a really important point, web and PDF have differences, as well as similarities and that means having a complimentary standard to ensure the differences are addressed is vital.
One of my favourite things about the latest version of the PDF Checker, otherwise known as PAC 2021 is that both standards work alongside each other in that tool. It’s acknowledging the need for both standards to be applied to create an accessible PDF. If you haven’t heard of PAC, it’s absolutely free and available from the PDF/UA Foundation’s website https://pdfua.foundation/en/pdf-accessibility-checker-pac. I highly recommend downloading this free tool to confirm how your documents are meeting the standards for accessibility.
There is a lot to cover in discussing how PDF/UA and WCAG work together, so if you’d like to have us come along and talk to you and your office in more detail about this (or any other) topic, please don’t hesitate to reach out to me via email at amace@abledocs.com or by phone 08 9206 3987.
Of course, if you missed out on this year’s PWAC, don’t worry there is always the next one and in between you can join in on the Perth Web Accessibility & Inclusive Design monthly meet ups.
|
|
 Grace takes centre stage in blind opera production
|
|
It’s one of the world’s most loved operas – Tchaikovsky’s Iolanta is the story of a blind princess who lives a secluded life. Her father, King René, hides her from the world because he doesn’t want his daughter to discover her disability.
Iolanta is oblivious to her blindness, regaining the sense of sight through love. The opera has never been staged in Perth before – that is until now. Taking the lead role of Iolanta at His Majesty’s Theatre, the home of West Australian Opera, is VisAbility client Grace King.
A first for Perth – blind opera production
Grace is a regular performer at the Perth Fringe Festival and the broader entertainment circuit. She was born in America and has always been totally blind. Her first taste of acting was at primary school.
“This opera production is made for me! If we’re going to have a blind character, then it needs to be performed by someone with no vision.”
Grace King, VisAbility client and performer.
The blind opera production has been months in the planning.
“I’m very interested in the arts, poetry, singing and prose. I’ve won trophies for public speaking.” explains Grace.
However, Grace won’t be singing in this performance because she’s not an opera singer.
“Director Katt Osborne decided we could create this opera using a series of monologues, so there’s myself and a professional opera singer,” adds Grace.
Katt collaborated with Disability Consultant Zel Iscel, another VisAbility client, to make this production a reality. It came about following a discussion by Katt with the Artistic Director of The West Australian Opera, Chris van Tuinen.
The team hope it’s a step in the right direction for more inclusive operas.
“I’ve worked on projects before with Chris. It was important to me that the lead should have lived the experience of blindness. I wanted the storyline to resonate with others with a disability. DADAA – a leading disability arts organisation in Fremantle, put me in touch with Zel. Of course, Zel was just as enthused as me about the project,” Director Katt explains.
“Oh yes, definitely. It’s an opportunity to challenge attitudes around disability. There’s a lot of the storyline from this blind opera production that I can relate to,” Zel adds.
“I’ve witnessed the struggles of apartheid, women’s fight for equal opportunities, the gay rights movement. Together society can break down barriers. Just like Iolanta, I have no vision, but I believe in the power of change. This production will help strengthen misconceptions about disability,” Zel says.
An opera that strikes a chord with your senses
Katt explains that this performance will be markedly different than other operas staged at His Majesty’s Theatre in Perth. Describing it as a hybrid, contemporary production she’s sure it will leave a lasting impression among the audience.
Many of the ideas within the production came about following a series of focus groups with the vision impaired community. It is an immersive production.
“This opera will appeal to your senses. There are floral smells from the garden, vibrations you can feel beneath you from the auditorium, and sounds coming from different areas of the stage”
Katt Osborne, Director
“Disability is a broad audience. We had to think about deaf people who wanted to access the storyline, so we have incorporated surtitles as well – transcribed dialogues above the stage,” adds Zel.
If you’d like to watch the opera being staged in April, tickets can be bought online (link opens in new window). It has audio description and captions (subtitles).
As well as being a client, Grace was also a volunteer with The Cisco Academy at VisAbility. Its aim was to support people with vision loss to become programmers and to configure electronics.
|
|
|
|
The blind opera production has been months in the planning
|
|
 Upcoming Events
|
|
Perth Web Accessibility & Inclusive Design Meetups
15th March, 2022
Forklore, West Perth
7:30-9:00am
Read more about the Accessibility Meetup group
|
|
|
|
|
|
|
