Transcription of:
What is an accessible museum website? Evaluation Methodologies and Good Practices.

PATRÍCIA MENDES:
... and I want to thank the organization for this opportunity.
I am Patrícia Mendes, I am developing a master's dissertation on usability and accessibility in museum websites and, today, I will be focusing on the accessibility aspect.

 

"What is an accessible museum website? Evaluation Methodologies and Good Practices."

When we think about a physically inaccessible museum, we may imagine, for instance, this picture, in which we see a man in a wheelchair in front of a stairway. He wants to get to an exhibition's room that is at the top of the stairs, but he can't.

​

In a museum's website it's sort of the same thing. When we go to the website we want to access content, such as videos and articles; information, such as schedules and prices; or functionalities, like ticket buying.

And, if we can't reach those, or if any demographics feel many difficulties to reach those goals, then it's because the website isn't accessible.

But when we make it so... It's good news: it's that, when me make an aspect of the website accessible to some demographics, in truth, there will be side effects that benefit everyone.

For instance, closed captions on videos. Who uses them? At first, we think – and it's true – 68% of people who use closed captions in videos, in this case, students, in this study, are students with hearing impairments. But there is a significant number which is: 49% of students without hearing impairments also prefer to use closed captions in videos, because they increase their compreension of the content.

So: closed captions make the content more accessible to people who are deaf, but also people with other native tongues, people with learning impairments, or those who want to understand the information better.
Therefore, what benefits some people, does also impact others.

 

The international organization called W3C is the organization that develops the web accessibility criteria that is the international standard. They are the Web Content Accessibility Guidelines. In Portugal, we also have the law on Website and mobile apps accessibility; which are guides that may allow us to evaluate these criteria and verify the websites' accessibility.

For that, we need... we can use automatic validators, which do a portion of these verifications; manual checks, which are the majority of the remaining, and it is also important to do usability testing with real users, our museum's demographics, using the website, so that we can identify its real problems, in the real use.

So who are the users whom we may be excluding? We may be excluding, for instance, among these fictional characters: João, who has got a broken arm, and thus can't use the mouse easily, so he navigates [the web] by using the keyboard's keys. He also has got ADD, therefore, too much visual noise in page  – too much information, too much text  – make his experience much more complicated; Ana, for instance, who doesn't have good nearsightedness, because of her age: when there are texts or images with low [color] contrast, it also becomes difficult for her. And Diogo, who is blind, uses a screenreader that reads the text that is displayed on screen, so that he knows what he is looking at.

 

And, today, I'm bringing three examples of barriers, and solutions, of criteria we can check for, which are: errors, zoom of text and keyboard accessibility.

Errors affect João, particularly, because of his ADD, but also because he takes longer doing his stuff through the keyboard; Diogo, who is blind, and uses the screenreader, but also everyone, in general.

In this image, we can see a form for visit appointments, at the National Museum of Ancient Art.

Let's imagine that João  – who has got ADD... is coming to schedule a group's visit and there isn't any... no form fields have got an asterisk. None is signalled as a required field. Thus, he's only filling out the parts that he guesses to be relevant. But, when he click Submit, some fields become yellow, they changed their color to yellow. Therefore, now, he will have to revise the form all over again, to understand what he did wrong or what he was supposed to have filled.

Diogo has his experience even more complicated, because the screenreader isn't able to guess that these letters are yellow. And he has to get to the bottom of the page to see this text that reads: "fill the signalled form fields correctly."

 

And now you'll also see that the good practice is much more intuitive. or a better practice, actually, this isn't the best of them all. But it is better in these aspects that I have mentioned. At the Calouste Gulbenkian Fundation's website, we have got a form that has the required form fields signalled with an asterisk. And, when you click submit, there's a message with the identified errors described in text next to the field with the error.

 

The Zoom of the text: it affects Ana, particularly. who has got difficulty reading, but also anyone with visual difficulties, even if they aren't visually impaired. Anyone with vision struggles – it can be harder for them, they may want to use the zoom of the text.

What does this mean? Since Ana has trouble seeing, she increased, in her browser's settings, she asked it to increase the text size. So, in this picture we Berardo's website, and I will now increase it to 200% and we can see that there are buttons that disappeared, thus, are no longer functional;

There is text that is cut off; and there's also text overlapping with other text, so, it becomes impossible to read it.

And the good practice indicates that, we you increase font size to, at east, 200%, no text is cut-off,  no text overlaps, and all elements remain functional. And we have seen, in this example, that it didn't happen in this website.

Lastly, keyboard accessibility, which affects, particularly, João, who's got a broken arm, Diogo, who is blind, and people who are dependant on assistive technologies.

I won't get too deep into this, but the truth is that, when, because there are many criteria in common, when something is inaccessible to the keyboard, it is also inaccessible to other assistive technologies, like voice recognition  – voice recognition software  –, and screenreaders. Thus, it impacts many people at once.

I will show you a good practice, that is also a good example to understand what's this keyboard navigation thing. João is going to the website – he the one who has the broken arm  –, he went to the Victoria and Albert Museum's website and, through the keyboard, he can move through the elements he may select: we can see a white rectangle around the element that he may activate, while navigating the page.

And, in this instance, the focus is visible. So, he can understand well what he's doing. Another thing about keyboard accessibility is that all elements must be interactable through the keyboard.

So, for instance, João went to the Museu Coleção Berardo's website to buy a ticket at the online box office and, at some point, this pop-up window shows up asking him to confirm his purchase. It has got a button reading: "Purchase", João tries to reach it through the keyboard, but he can't. And he even tries clicking Escape, to close the window, but he also cannot. So, he got stuck in this page, he can't buy the ticket, and he can't even leave this window.

With Diogo, it's even an even more curious experience, which isn't funny at all. He is blind, and in truth, the screenreader is reading all the text that is behind the window and it doesn't identify this pop-up window. It's invisible. So, he doesn't even know what's going on when he can't purchase the ticket.

And I will be able to... I confirmed this with two blind users who did a usability test for this talk, for the purpose of this talk, and it's that part that I will broach now. It's the third part of the evaluation process.

Actually, I'd like to thank the two volunteers who did this. Thank you very much [laughs].

So, in the usability test, we have to choose what the object of our evaluation will be, the study case.

In this case, I asked them to buy a ticket, with their computer – it could have been with a phone; choose the demographic, which, in this case, were two blind users, who use the screen reader NVDA, and who are regular museum visitors. So, they are our target audience, in this instance.

After doing the test, we have to systematize the results: verify the priority issues to be able to fix them.

My test's results: so, the task was buying a ticket at the Museu Coleção Berardo's website and at Fundação Calouste Gulbenkian's. The two users were able to find the online box office, at Berardo's website they took two minutes and nine minutes, to find it, respectively.

At Gulbenkian's website, none of them was able to find the box office. You may imagine the frustration of spending 34 minutes and 18 minutes searching, without being able to find the box office. In the case of this test, none reached the ticket-buying part of the process. In Berardo's case, because of the aforementioned error, none of them was able to buy the ticket, either. They spent eight minutes and 23 minutes searching, until they gave up.

And, finally, in the test's phase, I'm making a summary of the identified problems, of which I will only show a few of them. The pop-up – the pop-up window  – isn't read by the screen reader, as I had mentioned, and, thus, it isn't possible to buy a ticket; there are no error messages, so, both of them were four, five times, going to the shopping cart, and see that the shopping cart was actually empty, – the website's shopping cart – they'd go back, "What's going on?", go forward, "it's actually still empty"; they had no idea about what they could be doing wrong.

And another issue, for which I will show a one minute video, right after, illustrating, there are confusing and contradictory instructions; and, also, this comes side-by-side with there being buttons which aren't identified, that is, when... we see these colorful buttons reading: "Adults", "Students", "Children under 6 years old", which are the tickets we will buy.

But what the screen reader reads is something like: five thousand, four hundred and thirty-two, one thousand... blah, blah, blah. A series of nonsense numbers, because they weren't identified. And they should have been.

Right before these buttons there's a text that reads: "Choose your seats". "To choose in detail the intended zone, hover the mouse pointer over of each zone, or click on the list below".

Therefore, the user's impression was that they were looking at a map, these buttons were a map, and they were choosing seats in a room. So this question is not clear, it's not done well.

And that's it. Now, we'll be watching a video that illustrates this issue.

I just want to introduce it to you to say that this is an excerpt from the test with one of the users. I will read the context of the situation we are seeing, and the robotic, very accerelated voice that we will hear is the voice of the screen reader, for those who may not know, and it is very fast because blind people are used to it being this fast so that they may accomplish their tasks faster.

And I would also like you to go into this video remembering the frustration of her having spent 23 minutes trying to, and not being able to, buy the ticket. Imagine that state of mind. Ok, and I will start now. [laughs]

​

[A video starts playing on-screen, with footage of a website]

​

PATRÍCIA: "The buttons reading «Adult», etc, are perceived as being seats in a room"

[USER]: Ah, now we have to choose the seats. Ah...

[Inaudible voices in the room, and then Patrícia pauses the video.]

PATRÍCIA: Can you hear it well? Were you hearing it?

ANA BAILÃO: Yes. It's being heard on Zoom.

 

[Patrícia continues]

PATRÍCIA: "The buttons that say «Adults», etc, are perceived as being seats in a room."

[USER]: Ah, now we have to choose the seats. Ah... I'm now thinking that this has got a map for us to choose the seat where we will... where we can sit in the room. And I can't see it, right? So, but it has got an option, here, and I'm going to see if it's perceivable.

[NVDA says nonsense numbers]

[USER]: I will try one randomly, this time, because I can't understand what's the type of area otherwise I'd have to recurr to someone who could see to choose this.

PATRÍCIA: "After trying to buy the ticket, she clicked «Continue», but the cart is empty. She gives up and expresses her confusion.

[NVDA]: Empty shopping cart.

[USER]: Ah, and it's empty again. Hm, supposedly, I had chosen the day, already, because this got me to another phase in the form,

I had chosen the seat, I mean, I'm guessing, I don't know. And I'd already said I was the "Adult".

So it'll be one of these: Either one of these things wasn't marked, and it didn't accept it, in the final purchase, or this isn't accessible.

PATRÍCIA: The user even states a good conclusion for this presentation [laughs]

Either it assumed something [wrong] here, either it didn't assume the purchase, or this website isn't accessible [laughs].

So, then, conclusions:

An accessible museum website is a website that is easy to use by all people. For that, it is necessary to follow guidelines, but also to include the real experience of several demographics, using it, and we should- a museum's website should be accessible because it also one of the museum's sites, and thus, it's also part of its mission, to be for everyone.

 

Here are the bibliographic references.
Thank you, and also, thanks, again, to the volunteers who did the test.

[audience clapping]