Skiplink to next post (accessibility)

These RFCs were either rejected or have been replaced by an alternative proposal. They will not be included in phpBB.
philwhite
Registered User
Posts: 18
Joined: Fri Dec 28, 2012 3:09 pm

Skiplink to next post (accessibility)

Post by philwhite » Fri Dec 28, 2012 3:41 pm

In general, PHPBB3 is pretty accessible for screen readers. The biggest issue that I can see (I am partially sighted and do not myself use a screen reader) is that when reading a thread, screen reader users have to tab through all the editing buttons and the user profile information to get to the next post in the thread. Since every post already has an identifier (#nnnnn), it should not be too difficult to implement a hidden skiplink to the next post in the thread at the end of the text of each post. Screen reader users do not wish to manually tab through the signature, the edit buttons and the user profile information to get to the next post.

I am, unfortunately, a rank amateur with PHP, but the only real difficulty I envisage is getting the post ID from the row after the one for which you are currently passing template information. A second array of post IDs, with the first element removed and the last element as NULL merge into the result array would allow you to pass the ID of the next post and identify and announce to the screen reader the end of the thread/page. But as I say, I am a rank amateur.

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: Skiplink to next post (accessibility)

Post by brunoais » Sat Dec 29, 2012 10:03 pm

I think we could work with CSS for that matter.
All such that only screen readers read these.
Check if this sounds right to you:
Placing a link at the beginning of the page to send the user to the topic (in this case it's "Skiplink to next post (accessibility)") and then a link right after the title to jump right to the first post and then place a link after ever single post to jump right to the next post (I.e. it reads the username then it reads the post) does that sound right to you?

philwhite
Registered User
Posts: 18
Joined: Fri Dec 28, 2012 3:09 pm

Re: Skiplink to next post (accessibility)

Post by philwhite » Sat Dec 29, 2012 11:29 pm

Thanks for the reply.
There is already a skiplink at the top of every page to skip the header material.

Code: Select all

<p class="skiplink"><a href="#start_here">Skip to content</a></p>
The problem that I see is that the identifiers (the targets of the skiplinks) have to be unique. Therefore, for prosilver,

Code: Select all

<h3 class="first">
would need extending to

Code: Select all

<h3 class="first" id="nextpost#nnnn">
, where nnnn is the ID of the current post. The actual skiplink would be placed immediately after the content div (just before </div>. The problem is that the target for this skiplink (nextpost#mmmm) is only known in the template when the next row begins to be written (i.e. it is too late to write it to the previous div. That was why I suggested merging in a second array in the PHP file, where the post IDs were offset by one, the final ID being NULL, which would allow you to place a further skiplink at the end of the last post pointing either back to start_here if the post is the last post of the thread or to the next page if there are more posts. It would undoubtedly be relatively easy for a good programmer with greater skills than I!

Thus, the screen reader would (in default prosilver) read the title of the post, the name of the poster and the time, then the content and at the end of the content would have a skiplink to the next post. It's exactly the same way that a sighted person reads a forum. Nine times out of ten they don't read any of the profile information or look at any of the buttons unless they don't recognize the author.

Although I don't use a screen reader myself, I do use the tab sequence and the existing skip link to move around the page, because my sight is no longer good enough to see a mouse pointer. I therefore have a pretty good idea of the way in which a screen reader navigates.

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: Skiplink to next post (accessibility)

Post by brunoais » Sun Dec 30, 2012 8:19 am

Which browser do you use? I want to have a glimpse look at how that have problems reading and people who cannot see, "see" a page like this.

philwhite
Registered User
Posts: 18
Joined: Fri Dec 28, 2012 3:09 pm

Re: Skiplink to next post (accessibility)

Post by philwhite » Sun Dec 30, 2012 12:16 pm

I generally use Firefox, but as far as I know, all browsers handle the tab order in the same way. As I said, I do not personally use a sophisticated screen reader (I selected portions of text that I want to read and use a simple screen reader just to read those portions of text to me - I don't use it for navigation), but I do not use the mouse to navigate through a page. In terms of accessibility, we are talking about visually impaired users and keyboard users who cannot use a mouse. In any browser, you can simply press TAB to move the focus from link to link in the order in which they appear on the page. If you then press RETURN when the focus is on a link, the browser goes to that link. Thus, if you press RETURN when the focus is on the post title in prosilver, the page scrolls to move the post to the top of the browser window. This is useful for me as it means that I do not need to scroll with the scrollbar.

Skiplinks are not visible to sighted users (they are located outside the browser window), but screen readers can "see" these links and announced the contents of them. If I, as a partially sighted user, know that they are there, I can also use them (press TAB n times and then press RETURN will bring the next post to the top of the page, for instance).

Have a look at http://webanywhere.cs.washington.edu/ to see and download a simple screen reader that only works for browsers. Even if this does not work in exactly the same way as some of the most sophisticated screen readers like JAWS, it will demonstrate the principle to you.

But, as I say, you will get a very good idea of how a page works if you simply disconnect your mouse and try to navigate through a web site. If you press TAB, and you cannot see where the focus is, it is probably on an offscreen skiplink. Just press RETURN and see where it takes you!

If you are testing accessibility, it is vital that you keep your hands off the mouse! If information is only available after doing something with the mouse (in the form of mouse over texts, for instance), some people will not have this information. If certain actions can only be achieved with the mouse, some people will not be able to perform those actions.

A word of warning! There are people involved in SEO who claim that Google penalizes sites with hidden or offscreen links. Currently, most people, however, believe that that is not the case since support for assistive technologies is becoming far more widespread on the web. You will, however, find people who oppose the use of skiplinks. Google does certainly respond if they receive an actual complaint about a site using hidden links that contain spuriously information. Most people believe that they do not penalize sites automatically, after all, most menu systems are implemented using hidden links or offscreen links.

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: Skiplink to next post (accessibility)

Post by brunoais » Sun Dec 30, 2012 1:12 pm

Hum... I believe I have the latest version of prosilver...
I can only find the "skip to content" link on the top of the page.
Anyway, I only need to turn off CSS to view the page with all it's elements, there's no need for a screen reader to view that they exist, where they exist, and in which order will the screen reader find them. I do need, however, to understand how do they move around in a page where they cannot see images, just the text itself.
I work with tabs and arrows, but from what I understood, it's way different being able to predict where the tab will land by watching the page, vs not being able to view the page.
I tried what you suggested for a while. The page is rendered in my browser in a slightly different, though interesting way.
Tab is not the only key here! There's a nice interesting set of shortcut keys to send the "pointer" of the screen reader to another place in the page. That's quite important to notice and to take into consideration when thinking on making these kinds of webpages for screen readers such that we can take advantage of their existence and make better systems for both that see and don't see.

philwhite
Registered User
Posts: 18
Joined: Fri Dec 28, 2012 3:09 pm

Re: Skiplink to next post (accessibility)

Post by philwhite » Sun Dec 30, 2012 4:01 pm

Yes, at the moment there is only one skiplink in prosilver.

The link that I gave you performs in a way very similar to the way that a screen reader like JAWS works. The important thing about a screen reader is that it will read links that are hidden off the page and announce the contents.

I was thinking about this a lot more while I was walking the dog this morning.

If the block variables for forum categories, forums, topics and posts always passed the ID of the next item (as well as the current item) to the template and passed "endofpage" or "endoflist" is appropriate for the last item in the block, it would be relatively trivial to create extremely accessible templates. The only changes to the PHP code would be to capture the ID of the next item. All the rest is done in the template.

Assuming that the ID is the next post was passed to the template as, for instance NEXTPOST_ID id the posting block, the work in the viewtopic_body.html template would be relatively trivial.
  • Assign an ID to ul.profile-icons
    <ul class="profile-icons" id=profileicons#{postrow.POST_ID}">
  • Add the skiplinks
    <div class="content">{postrow.MESSAGE}
    <p class="skiplink"><a href="#p{postrow.NEXTPOST_ID}">Go to next post</a>
    <p class="skiplink"><a href="profile{postrow.POST_ID}">Go to poster profile</a>
    </div>
    <p class="skiplink"><a href="profile-icons#{postrow.POST_ID}">Actions for this post</a>
    <!-- IF not S_IS_LOCKED -->
    <p class="skiplink"><a href="{U_POST_REPLY_TOPIC}" title="{L_POST_REPLY}"><span></span>{L_POST_REPLY}</a>
    <!-- ENDIF -->
Of course, all the text elements would need to be defined as language elements, and other skip links would be needed at the end of the profile and profile-icons blocks to allow users to move back to the content of the current post or forward to the content of the next post, and there are many more edits to do this for private messages and so on, but the principle is straightforward. It effectively allows a user with a screen reader to quickly navigate through the real content and ignore the ancillary content, but to read the ancillary content as and when they wish to. The last skiplink in the list above saves a screen reader user from navigating all the way to the reply button.

As I said, similar mechanisms could be implemented for the forum listings and topic listings, again providing that the ID of the next item was passed with the current item. In all cases, handling of the last item in the list would need to be defined ("Go to next page" or "End of topic, return to top").

In essence, the same approach could be adopted for a template for non-mouse users. The only difference would be that the skiplinks class was visible and possibly highlighted in a special way.

philwhite
Registered User
Posts: 18
Joined: Fri Dec 28, 2012 3:09 pm

Re: Skiplink to next post (accessibility)

Post by philwhite » Sun Dec 30, 2012 8:54 pm

Okay, it could be done much more easily:

The code I suggested for viewtopic.html would read as follows
Assign an ID to ul.profile-icons

Code: Select all

<ul class="profile-icons" id=profileicons{postrow.POST_ID}">
Assign an ID to h3 elements

Code: Select all

			<h3 id="nextpost{postrow.POST_NUMBER}" <!-- IF postrow.S_FIRST_ROW -->class="first"<!-- ENDIF -->><!-- IF postrow.POST_ICON_IMG --><img src="{T_ICONS_PATH}{postrow.POST_ICON_IMG}" width="{postrow.POST_ICON_IMG_WIDTH}" height="{postrow.POST_ICON_IMG_HEIGHT}" alt="" /> <!-- ENDIF --><a href="#p{postrow.POST_ID}">{postrow.POST_SUBJECT}</a></h3>
Add the skiplinks

Code: Select all

<div class="content">{postrow.MESSAGE}
<p class="skiplink"><a href="#{postrow.POST_NUMBER + 1}">Go to next post</a>
<p class="skiplink"><a href="#profile{postrow.POST_ID}">Go to poster profile</a>
<p class="skiplink"><a href="#profile-icons{postrow.POST_ID}">Actions for this post</a>
<!-- IF not S_IS_LOCKED -->
<p class="skiplink"><a href="{U_POST_REPLY_TOPIC}" title="{L_POST_REPLY}"><span></span>{L_POST_REPLY}</a>
<!-- ENDIF -->
</div>
If I can manipulate template variables as above ({postrow.POST_NUMBER +1}), then the problem is essentially solved.

Is it possible to use template variables like that?

Unfortunately, I am away for a few days now and cannot try this out.
Last edited by philwhite on Sun Dec 30, 2012 9:59 pm, edited 1 time in total.

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: Skiplink to next post (accessibility)

Post by brunoais » Sun Dec 30, 2012 8:57 pm

There's no need to know the id of the next post.
Ultimately, we only need to use a tag with an id with a simple code perpended to the number of the post in the page. For example, this post I'm making would have as an id:
"post_text_9"
And then we could use those skiplinks you suggested after the message and before the signature.
IMO, they should point to before the author of the post, just after the post header and they should be positioned just before and a copy of it just after the signature.

What do you think?

Note: Adding 1 to the postid will not make it point to the next post.

philwhite
Registered User
Posts: 18
Joined: Fri Dec 28, 2012 3:09 pm

Re: Accessibility

Post by philwhite » Sun Dec 30, 2012 11:31 pm

Yes, I had realised that I don't need the next post ID. Therefore, in my last post, I was using the POST_NUMBER, not the POST_ID for the skiplink to the next post.

However, I cannot think of a way of incrementing the number in the template alone.

In a given row, i need an arbitrart number nn and nn+1 simultaneously.

The code

Code: Select all

{postrow.POST_NUMBER + 1}
does not parse.
Whatever arbitrary ID I assign to post B, I have to know what it will be when I am generating the HTML for post A.

Yes, a copy after the signature would be sensible.

I'm not sure about putting the tarhet before the subject, as the subject line can change (although it rarely does). I just changed it for this post.

All the rest works fine.

What we need to think of is what a sighted user ignores without thinking about it. I am running my board (http://www.wordwizard.com/phpbb3) with the "Share on" mod, and a screen reader user has to tab through ten or so "Share on" links. They could/would be skipped with this method.

Post Reply