top of page

Cognitive Walkthrough of A11yFirst CKEditor

Persona: Professor making class website who has a student with accessibility needs. Does not know anything about accessibility rules or guidelines and decides to use this program to create the site.

 

Task 1: Making Titles for the Site Sections

The professor wants to make section titles on his site.

Correct steps:

  1. Type your section title

  2. Highlight the text and click Heading button - you will only be allowed to choose Heading 1 for first title

  3. If you want the next text you type to be a sub-heading, you can highlight and click the heading button again. It will only allow you to choose the next appropriate heading-type

We do think it is believable that the professor will want a title first thing. They are likely to look to change the font first, but that is not available in this program. After they look around for that the Heading button is the next most obvious one - especially since it is synonymous with title and is in the top right corner, which is the first place most eyes are drawn. The heading button will only allow you to choose the appropriate heading, which is helpful for accessibility.

​

The professor will see immediate results of his actions because the size of the font changes for each successive heading.

Task 2: Professor wants to edit the font size and color to emphasize an assignment

First: professor can’t change size or color, but she can emphasize text. Correct step to do so:

  1. Italicize (do not bold – read differently by a screen reader)

Likely, the professor will not be looking for the italicize button since she wants font or color and it doesn’t exist. She won’t see the control for the action because it does not exist. She may want to find out why and click the A11yFirst Help menu. If she clicks on the menu she will not easily find an explanation, unfortunately.

​

She may then look at the bold and italicize options. Even though the right answer is to italicize, there is nothing that make clear that italicization is emphasis while bold is read as strong text, so she may decide to bold instead of italicizing which is not as accessible. She would recognize the change in font as visible on the screen but would not realize the difference on a screen reader and would not know it did not have the effect she wanted.

Task 3: Put an Image in the Website and Describe It

The professor wants to add an image to the class site.

Correct steps:

  1. Click the image icon

  2. Have to put in an URL (no upload option because it will be a WordPress plugin)

  3. Press OK

  4. Note: alternative text is not required.

​

We do think the Professor will know to click the image button – that is consistent with other programs. Once they click it, they will quickly realize to put the URL in. (Since this is a WordPress plugin, uploaded images will be available through WordPress). The Professor will then know to click OK and will see the effect because the image appears in the screen.

​

However, If the professor is trying to make an accessible site, alt-text is not required and there is not particularly strong push for the professor to enter it. They may believe they’ve made an accessible image without actually having done so, since the program enforces accessibility in so many other ways.

Task 4: Check Accessibility

Professor wants to confirm their site is actually accessible.

Correct steps:

  1. Press image of person with arms out

  2. If any problems, do what it tells you and click Quick Fix

​

The biggest issue here is that the professor wouldn’t even necessarily know that the accessibility checker was a feature of this program. Our professor is new to accessibility and doesn’t know what the image of the person with their arms out means so they wouldn’t know to click it. Once they do click it, it is really easy to fix accessibility problems (like the lack of alt-text) but it does no good unless it is made more obvious what the button means.

bottom of page