Advice on the use of fieldsets in the new Update page

[hope]

Hi, dw_accessibility!

fu and I have been working on building the next version of the update page redesign, and making sure our markup is as accessible as possible.

With that in mind, we have a question with regards to the use of fieldsets that we hope you can help us with.


As you can see from the first mockup, the Update page is basically one big form, soon to have many more form elements added to it, grouped together in what fu and I have been calling "components".

For example, there is the grouping of the subject field and entry textarea, and the "Currents" component that comprises the select menu for mood, music text field, and location text field.

As far as fu and I can see, there are two options for the use of fieldsets on this page, detailed below:


Mockup 1: the form uses a single fieldset. The legend is the title of the page, and all form items occur in a useful order within the fieldset. The title of each component uses heading markup, e.g. <h3>


Mockup 2: the page contains multiple fieldsets. Each component has a fieldset of its own, and the title of each component is marked up as a legend.

So, our question is - which use of fieldsets is the most accessible to you, mockup 1 or 2? Or do you have a suggestion for a different use? Feedback is gladly welcomed :)

Thanks!

Update: This news post links to a live version of Mockup 1.

Comments

[deborah]

Hopefully a real screenreader user will respond, but if not, I can make recordings for you of a fake screenreader user (me) navigating each of the pages with a variety of screenreaders.

That being said, to do that, I'll have to code each option. It would probably be easier for the screenreader users to assess for you if both options existed as links to navigate. Do they? I don't see links to them here.

[hope]

We didn't have links to them at the time I made the post, but mockup one is now live, linked via this dw_news post.

Thank you for your feedback!

[ex_peasant441]

The things you have marked as 'headings' in the first mockup look more like they should be labels to me, unless you have more than one widget per 'heading' in which case they should be fieldsets.

Providing you use the 'for' attribute on a label, using labels makes it all much easier in terms of tabbing through a form and working out what is what. You can have more than one label per input if required.

Also don't forget you can nest fieldsets if you need to create a hierarchy.

The biggest advantage of fieldsets for me is the heirarchy of the form is still apparent even if the style is switched off (which I sometimes do when my brain is too tired to cope with fussy layouts or colours). One big fieldset doesn't help for that, but several nested fieldsets definitely do.

[jeshyr]

This is more or less what I was thinking too - nested fieldsets with the first mockup being the "outer" and the second one the "inner", sort of.

However my assistive tech doesn't make use of fieldsets so it's not actually something I'm any more qualified on that your average reader-of-stuff-about-this.

r

[hope]

However my assistive tech doesn't make use of fieldsets

Ooh, really? So it doesn't read legends...?

ETA: or, ah, I am probably assuming too much about the kind of assistive tech you're using *g*

[jeshyr]

*grins*

Yup, assumption. I don't use text-to-speech technology for web pages - I just use large text (100pt usually) and a button that disables most/all of the CSS formatting when I need to so that I can reformat it in the most visually friendly style.

[hope]

The mockup images in this entry don't really accurately demonstrate how we're using labels within the page, but hopefully the live version of mockup 1 (link within news post) does.

Thanks for the tips!

[codeman38]

Just found a keyboard accessibility issue with the new update page.

In the tags box, enter two tags, and then try to delete them with the backspace key. After deletion, the focus doesn't return to the entry box-- and the second backspace may even be caught by the browser as the keyboard shortcut for "back"!