General Support: Code cleanup

Posted by Frederic Bayer on

Hi,

I have recently taken over as web manager for our Community Council and received a complaint from the City Council regarding our website not being parsed correctly by screen readers, which is a legal requirement for websites of statutory bodies.

I have now managed to fix this by editing the code of every page to strip out reams and reams of non-functional HTML code, which was either generated when people were editing content using the WYSIWYG editor, or copying and pasting content into it from elsewhere.

Some of the issues include empty tags sitting there doing nothing (e.g. <h2></h2>, several <p>&nbsp;</p> sitting at the bottom of pages), or things being multiply wrapped by empty <span> tags (i.e. <p><span><span><span>Content here</span></span></span></p>).

I know other platforms like Wordpress have a feature that automatically strips away any meaningless code when pages are published. Is there any chance a feature like this could be added to Voice?

Personally, I'm happy bypassing the WYSIWYG editor completely and writing HTML code, but no one else on the Community Council is, so if I were incapacitated or moved on, my replacement had to use the WYSIWYG editor, and we would soon fall afoul of the accessibility requirement again.

Many thanks,

Frederic Bayer
Froghall, Powis & Sunnybank Community Council

2: Re: Code cleanup (response to 1)
Posted by Voice Admin on

The usual cause of unnecessarily messy HTML is cutting and pasting content from Word.

There are a few things that can improve this - there's a Paste From Word button in the editor as well as a Paste as Text button. These do a good job of ensuring the paste itself doesn't introduce too much mess.

There's also a Cleanup Messy Code button, but it won't do a completely perfect job.

Note though that the editor already ensures that the HTML is valid - it will remove broken tags and reformat code as necessary. Though we try not to be overly harsh with the code cleanup as this can then break things if you've embedded some custom markup for a particular widget or similar.

I'd be interested to know what the specific problem was with screen readers. For example an empty span tag should cause it no problem - but maybe there was something else on there that it objected to.

Thanks

Joe - Voice Admin