Skip to main content ↑ ↓
Validating the default theme Started by Atlas · · Read 7720 times 0 Members and 2 Guests are viewing this topic. previous topic - next topic

Validating the default theme

There are a couple of issues validating the default theme.

1. Missing lang attribute on the open <html> tag.

I opened all the .template.php files and searched for <!DOCTYPE html>, just below the doctype on the open <html> tag I added
Code: [Select]
lang="'.$txt['lang_dictionary'].'"

2. (By default) there's a missing src attribute on <img class="avatar">
Admin > Forum > Attachments & Avatars > Avatar Settings:
If "Enable a default avatar for all users without their own avatar" is unticked there's an empty src attribute on <img class="avatar"> tags. You could add a check for this option in the templates but I'd suggest simply removing the option altogether.

3. It's not throwing an error but the http-equiv attribute is depreciated in HTML5. So:
Find:
Code: [Select]
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Replace:
Code: [Select]
<meta charset="utf-8" />

However, enabling the openID meta tag does throw an error for the http-equiv attribute:
Code: [Select]
<meta http-equiv="x-xrds-location" content="' . $scripturl . '?action=xrds" />


I'll update here if I find any more validation issues.
 
Last Edit: December 11, 2018, 05:51:52 am by Atlas

Re: Validating the default theme

Reply #1 –

The next thing to tackle is the structural outline. The structural issues become apparent when you tick the "outline" checkbox on the validator form.  There are two parts to this issue, the first of course is the malformed hierarchy of heading tags and the second is the arbitrary use of semantic HTML elements, namely <section> and <aside>.   My changes here will be numerous so I won't list them here. I'm just posting to add a comment about the use of semantic elements vs non-semantic elements. Be mindful of what you're conveying when you use a semantic element, for example:
Code: [Select]
		<section id="header" class="wrapper">
			<h1 id="forumtitle">
				<a class="forumlink" href="https://www.elkarte.net/community/index.php">ElkArte Community</a>
				<span id="logobox">
					<img id="logo" src="https://www.elkarte.net//community/themes/default/images/logo.png" alt="ElkArte Community" title="ElkArte Community" />
				</span>
			</h1>
		</section>
...is an arbitrary use of <section>, this element should be replaced with the non-semantic <div>. So I'll be making changes like that next.

Some thoughts on semantic elements as it pertains to the forum:

<h1> belongs to the <body>, although it's fine nested in a <header>
<section> means section of content and should have a heading tag.
<article> means a standalone piece of content and should have a heading tag.
<aside> means related content not required for the understanding of the current document, and should have a heading tag ..."News" is a good use for it, kudos there, but as parent of the search feature, I'm thinking no. IMO it should be omitted and the ARIA Search Landmark role="search" should be added to the <form>. Anyways, I'm on it.


Oh btw, a caveat on heading tags... my theme edit will begin with <h2> rather than <h1> because my forum install is not in the root directory of my domain, your install might be root, if so it should begin with <h1>.
Last Edit: December 11, 2018, 06:46:22 pm by Atlas

Re: Validating the default theme

Reply #2 –

I just finished resetting the heading/structural outline for publicly facing pages (subdirectory install -- forum starts with <h2>), I'm about to recode it for a root install (forum starts with <h1>), then zip both versions of the theme and upload them here.  This will conclude my valid-HTML edits to the default theme, after which  I'll begin my edit for the default theme in RDFa.

Re: Validating the default theme

Reply #3 –

As promised, the reset headings/structural outline for the default theme's templates.

I have two versions here, one for a root install, such as: www.exampleforum.com

and another version for a sub-directory install, such as: www.example.com/forum/

both zips are of the "themes/default" directory.

Re: Validating the default theme

Reply #4 –

Jumping the gun slightly here but this extra "message icon" is included in the zips above and posts coming from the calendar default to it. This edit will become more relevant with the next leg of my reset when I convert HTML to RDFa.

Code: [Select]
INSERT INTO [icode]elkarte_message_icons[/icode] ([icode]id_icon[/icode], [icode]title[/icode], [icode]filename[/icode], [icode]id_board[/icode], [icode]icon_order[/icode]) VALUES
(14, 'Event', 'calendar', 0, 13);

Re: Validating the default theme

Reply #5 –

About this edit. I ended up removing almost all of the semantic html elements. The "news" is still in an <aside> but that's about it for semantic elements.  I also removed the duplicate breadcrumbs at the bottom of the template.
Also, if you're using the  subdirectory_default.zip version you need to search the index.template.php file for <h1> and replace my homepage with yours.

One more thing, for those using other languages, there's one edit in the index.english.php file you'll need to duplicate in your language's index file for proper headings. Search for:

Code: [Select]
$txt['last_post_message']
...and edit your language's index file accordingly.

Attached file is a screencap of validation results for a topic page:
Last Edit: December 18, 2018, 01:04:27 pm by Atlas

Re: Validating the default theme

Reply #6 –

Following along, what is the plan, to submit via GitHub for 1.2? 2.0? Or complete the templates and ask a dev to commit?
 

Re: Validating the default theme

Reply #7 –

Quote from: Trekkie101 – Following along, what is the plan, to submit via GitHub for 1.2? 2.0? Or complete the templates and ask a dev to commit?

Sorry, I just noticed this reply. I'll probably just zip it up and upload here, if anyone wants to add it to Github, feel free.